<template>
  <div>
    <app-head></app-head>
    <app-body>
      <el-carousel height="600px">
        <el-carousel-item v-for="item in outsideImgList" :key="item.url">
          <img :src="item.url" alt="" style="width: 100%; height: 100%;"/>
        </el-carousel-item>
      </el-carousel>
      <div style=" margin: 15px 0 ">
        <el-container style="margin-bottom: 15px">
          <el-header style="height: 30px">关于茶</el-header>
          <el-container>
            <el-main>茶文化意为饮茶活动过程中形成的文化特征，包括茶道、茶德、茶精神、茶联、茶书、茶具、茶
              谱、茶诗、茶画、茶学、茶故事、茶艺等等。茶文化起源地为中国。中国是茶的故乡，中国饮茶，
              据说始于神农时代，少说也有4700多年了。直到现在，汉族还有民以茶代礼的风俗。潮州工夫茶
              是中国茶道的核心代表，在中国茶艺中最具代表性，被称为中国茶道的“活化石”。汉族对茶的
              配制是多种多样的：有太湖的熏豆茶、苏州的香味茶、湖南的姜盐茶、蜀山的侠君茶、台湾的冻顶
              茶、杭州的龙井茶、福建的乌龙茶、六安的六安瓜片等。<br><br>
              全世界一百多个国家和地区的人喜爱品茶，各国茶文化各不相同，各有千秋：中国茶文化反映出中
              华民族的悠久的文明和礼仪。潮州工夫茶蜚声四海，是国家级“非物质文化遗产”和联合国教科
              文组织人类非物质文化遗产代表作名录</el-main>
            <el-aside width="200px">
              <img src="../../assets/tea.jpeg" alt="" style="width: 190px;height: auto;margin-top: 4px;border-radius: 20px">
            </el-aside>
          </el-container>
        </el-container>
<!--        -->
        <el-container>
          <el-header style="height: 30px">茶种类</el-header>
          <el-main class="dis">
            <div style="margin-bottom: 10px">
              <img src="../../assets/lvcha.jpg" alt="">
              <p>绿茶</p>
            </div>
            <div style="margin-bottom: 10px">
              <img src="../../assets/baicha.jpg" alt="">
              <p>白茶</p>
            </div>
            <div style="margin-bottom: 10px">
              <img src="../../assets/heicha.jpg" alt="">
              <p>黑茶</p>
            </div>
            <div style="margin-bottom: 10px">
              <img src="../../assets/hongcha.jpg" alt="">
              <p>红茶</p>
            </div>
            <div>
              <img src="../../assets/huangcha.jpg" alt="">
              <p style="bottom: 14px;">黄茶</p>
            </div>
            <div>
              <img src="../../assets/wulongcha.jpg" alt="">
              <p>乌龙茶</p>
            </div>
            <div>
              <img src="../../assets/img.png" alt="">
              <p>茶具</p>
            </div>
            <div>
              <img src="../../assets/qingcha.jpg" alt="">
              <p>青茶</p>
            </div>
            <div>
              <img src="../../assets/img_1.png" alt="">
              <p>茶具</p>
            </div>
            <div>
              <img src="../../assets/huacha.jpeg" alt="">
              <p>花茶</p>
            </div>
          </el-main>
        </el-container>
      </div>
    </app-body>
    <app-foot></app-foot>
  </div>
</template>

<script>
import AppFoot from "@/components/common/AppFoot.vue";
import AppHead from "@/components/common/AppHeader.vue";
import AppBody from "@/components/common/AppPageBody.vue";

export default {
  name: "index",
  components: {
    AppHead,
    AppBody,
    AppFoot
  },
  data() {
    return {
      outsideImgList: [
        { url: require("/src/assets/lun1.jpg")},
        { url: require("/src/assets/lun2.jpg")},
        { url: require("/src/assets/lun3.jpg")},
        { url: require("/src/assets/lun4.jpg")},
        { url: require("/src/assets/lun5.jpg")},
        { url: require("/src/assets/lun6.jpg")},
      ]
    };
  }
}
</script>

<style scoped>
.is-vertical{
  border: 1px dotted #1B6921;
}
.el-header{
  background-color: #097545;
  color: #fff;
  line-height: 30px;
  font-weight: 900;
  text-align: left;
}
.dis{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  div{
    position: relative;
  }
  p{
    position: absolute;
    bottom: 4px;
    color: #fff;
    text-align: center;
    background-color: #1B6921;
    width: 100%;
    opacity: 0.6;
    margin: 0;
  }
  img{
    width: 210px;
    height: 275px;
  }
}
</style>